<template>
  <div class="system-user">
    <Form ref="searchForm" :model="searchForm" inline>
      <FormItem prop="username">
        <Input type="text" v-model="searchForm.username" placeholder="Username">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="org">
        <Input type="text" v-model="searchForm.org" placeholder="Org">
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit()">Search</Button>
        <Button type="primary" @click="handleCreate()">Create</Button>
        <Button type="primary" @click="handleExport('userTable', '')">Export</Button>
      </FormItem>
    </Form>

    <Table
      ref="userTable"
      border
      size="small"
      highlight-row
      :columns="tableColumns"
      :data="tableData">
      <template slot-scope="{ row }" slot="name">
        <strong>
          <Icon type="ios-paper"/>
          {{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px">View</Button>
        <Button type="error" size="small">Delete</Button>
      </template>
    </Table>
  </div>
</template>

<script>
  import NedbUtils from '../../../utils/NedbUtils'
  import TableDataUtils from '../../../utils/TableDataUtils'

  export default {
    name: 'User',
    components: {},
    data () {
      return {
        tableColumns: [
          {
            title: 'Name',
            slot: 'name'
          },
          {
            title: 'Age',
            key: 'age'
          },
          {
            title: 'Address',
            key: 'address'
          },
          {
            title: 'Action',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        tableData: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          }
        ],
        searchForm: {}
      }
    },
    methods: {
      handleSubmit () {
        NedbUtils.insertData({name: 'user'}, (res) => {
          console.log(res)
        })
      },
      handleCreate () {
        console.log()
      },
      handleExport (tableRef, fileName) {
        TableDataUtils.exportData(this.$refs[tableRef], fileName)
      }
    }
  }
</script>

<style scoped>
  .system-user {
    width: 100%;
    height: 100%;
  }
</style>